<template>
	<view class = "kind">
		<view class="header">
			<view class="left">
				<image src="../../assets/images/chat.png" mode=""></image>
			</view>
			<view class = "right">
				<image src="../../assets/images/search.png" mode=""></image>
				<image src="../../assets/images/cart.png" mode=""></image>
			</view>
		</view>
		
		<view class="qq" v-if ="this.list.length != 0">
			<view class="kindinfo" @tap = "goCreate(list[0].id)">
				<view class="info" >
					<view class="left">
						<text>{{ list[0].ctitle }}</text>
						<text>{{ list[0].etitle }}</text>
					</view>
					<view class="right">
						<image :src="list[0].img" mode=""></image>
					</view>
				</view>
			</view>
			<view class="kindinfo1" @tap = "goDecoration(list[1].id)">
				<view class="info" >
					<view class="left">
						<text>{{ list[1].ctitle }}</text>
						<text>{{ list[1].etitle }}</text>
					</view>
					<view class="right">
						<image :src="list[1].img" mode=""></image>
					</view>
				</view>
			</view>
			<view class="kindinfo2" >
				<view class="left" @tap = "goStyle(list[2].id)">
					<view class="text">
						<text>{{ list[2].ctitle }}</text>
						<text>{{ list[2].etitle }}</text>
					</view>
					<image :src="list[2].img" mode=""></image>
				</view>
				
				<view class="right" @tap = "goLamp(list[3].id)">
					<view class="text">
						<text>{{ list[3].ctitle }}</text>
						<text>{{ list[3].etitle }}</text>
					</view>
					<image :src="list[3].img" mode=""></image>
				</view>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	import http from "../../utils/http.js"
	export default {
		data() {
			return {
				list:[],
				ctitle:'',
			};
		},
		onShow(){
			http.get("/api/leju/front/kind/list").then(res => {
				console.log(res);
				this.list = res.data.data;
				console.log(this.list);
			})
		},
		methods:{
			goCreate(val){
				uni.navigateTo({
					url:`/pages/kind/catogory/catogory?id=${val}`
				})
			},
			goDecoration(val){
				uni.navigateTo({
					url:`/pages/kind/catogory/catogory?id=${val}`
				})
			},
			goStyle(val){
				uni.navigateTo({
					url:`/pages/kind/catogory/catogory?id=${val}`
				})
			},
			goLamp(val){
				uni.navigateTo({
					url:`/pages/kind/catogory/catogory?id=${val}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.kind{
		width:750rpx;
		background-color: wheat;
		position:relative;
		padding:0.01rpx;
		// border-radius:20rpx 20rpx 0 0;
		.header{
			width:750rpx;
			height: 140rpx;
			background: #354E44;
			
			position:absolute;
			left:0;
			top:0;
			display:flex;
			justify-content: space-between;
			align-items:center;
			.left{
				width:42rpx;
				height: 42rpx;
				margin-left:42rpx;
				image{
					width:100%;
					height: 100%;
				}
			}
			.right{
				width:98rpx;
				height: 36rpx;
				margin-right:20rpx;
				display:flex;
				justify-content: space-between;
				align-items: center;
				image{
					width:36rpx;
					height: 36rpx;
				}
			}
		}
		.kindinfo{
			width:670rpx;
			height: 302rpx;
			margin:64rpx auto;
			background: #D5D5D5;
			box-shadow: 0 12px 20px 0 rgba(83,66,49,0.05);
			border-radius: 20px;
			position:relative;
			margin-top: 228rpx;
			.left{
				width:165rpx;
				height: 114rpx;
				position:absolute;
				left:52rpx;
				bottom:40rpx;
			}
			.right{
				width:416rpx;
				height: 252rpx;
				position:absolute;
				right:0;
				bottom:0;
				image{
					width:100%;
					height: 100%;
				}
			}
		}
		.kindinfo1{
			width:670rpx;
			height: 302rpx;
			margin:64rpx auto 40rpx;
			background:#FFFFFF;
			box-shadow: 0 12px 20px 0 rgba(83,66,49,0.05);
			border-radius: 20px;
			position:relative;
			.left{
				width:165rpx;
				height: 114rpx;
				position:absolute;
				left:52rpx;
				bottom:40rpx;
			}
			.right{
				width:416rpx;
				height: 252rpx;
				position:absolute;
				right:0;
				bottom:0;
				image{
					width:100%;
					height: 100%;
					border-radius: 0 0 30rpx 0;
				}
			}
		}
		.kindinfo2{
			width:670rpx;
			height: 442rpx;
			margin:0 auto 80rpx;
			display:flex;
			justify-content: space-between;
			// padding:0.1rpx;
			.left{
				width:312rpx;
				height: 100%;
				background: #FAFAFA;
				box-shadow: 0 12px 20px 0 rgba(83,66,49,0.03);
				border-radius: 20px;
				position:relative;
				.text{
					width:103rpx;
					height: 114rpx;
					position:absolute;
					left:52rpx;
					bottom:48rpx;
					z-index: 2;
				}
				image{
					width:312rpx;
					height: 392rpx;
					position:absolute;
					left:0;
					bottom:0;
					z-index: 1;
				}
			}
			.right{
				width:312rpx;
				height: 442rpx;
				background: #FAFAFA;
				box-shadow: 0 12px 20px 0 rgba(83,66,49,0.03);
				border-radius: 20px;
				position:relative;
				.text{
					width:200rpx;
					height: 114rpx;
					position:absolute;
					left:52rpx;
					bottom:48rpx;
					z-index: 2;
					text{
						display:block;
					}
				}
				
				image{
					width:312rpx;
					height: 442rpx;
					position:absolute;
					left:0;
					bottom:0;
					z-index: 1;
				}
			}
		}
	}
	
</style>
